/**
 * 自定义指令
 * 1. 定义语法
 *   - 局部指令
 *       - new Vue({directives:{指令名:配置对象}});
 *       - new Vue({directives:{指令名:回调函数}});
 *   - 全局指令
 *      - Vue.directive(指令名,配置对象);
 *      - Vue.directive(指令名,回调函数);
 * 2. 配置对象中常用的3个回调
 *    - bind 指令与元素成功绑定时
 *    - inserted 指令所在元素被插入页面时调用
 *    - update 指令所在模板结构被重新解析时调用
 * 3. 备注
 *    - 指令自定义时不加v-,但是在使用是要加v-
 *    - 指令名如果是单词,要使用kebab-case命名方式,不要使用camelCase命名
 */

// 阻止Vue在启动时生成生产提示
Vue.config.productionTip = false;
// 注册全局VUe指令
// Vue.directive('big',function (element, binding) {
// 	// 何时调用? 1.绑定成功时,2.指令所在模板被重新解析时
// 	element.innerText = binding.value * 10
// });
new Vue({
	el: "#root",// 用于指定当前Vue实例在为哪个容器服务,通常为css选择器 也可以写为 document.getElementById("root")
	data: {// data用于存储数据,数据供el指定的容器使用,
		n: 1
	},
	directives: {
		big(element, binding) {
			// 何时调用? 1.绑定成功时,2.指令所在模板被重新解析时
			element.innerText = binding.value * 10
		},
		fbind: {
			// 指令与元素成功绑定时
			bind(element, binding) {
				element.value = binding.value
			},
			// 指令所在元素被页面插入时
			inserted(element, binding) {
				element.focus();
			},
			// 指令模板被重新解析时
			update(element, binding) {
				element.value = binding.value
			}
		}
	}
});
